<template>
  <div class="layout">

    <CustomerInformation class="top-user" v-if="route.meta.topShow" />

    <div class="route-wrapper">
      <!-- <RouterView></RouterView>
      <van-watermark :content="store.AppState.userName" text-color="rgba(0, 0, 0, .1)" :gap-x="80" :gap-y="10"
        v-if="visible" /> -->

      <RouterView v-slot="{ Component }">

        <keep-alive>
          <component :is="Component" :key="route.fullPath" v-if="route.meta.keepAlive"></component>
        </keep-alive>

        <component :is="Component" :key="route.fullPath" v-if="!route.meta.keepAlive"></component>

        <van-watermark :content="store.AppState.userName" text-color="rgba(0, 0, 0, .1)" :gap-x="80" :gap-y="10"
          v-if="visible" />
      </RouterView>
    </div>

  </div>

  <Loading :loading="store.loading" />
</template>

<script setup lang="ts">
import { useRoute } from "vue-router";
import { useUserStore } from '@/stores/user'
import Loading from '@/components/Loading.vue'
import CustomerInformation from '@/components/CustomerInformation.vue'

const route = useRoute()

const store = useUserStore()

const visible = computed(() => {
  return route.path !== '/login' && route.path !== '/check'
})

</script>

<style lang="scss">

#app {
  width: 100vw;
  // height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
  position: fixed;
  /* 防止iOS上的弹跳/滚动 */
  top: 0;
  left: 0;
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: constant(safe-area-inset-left);
  padding-left: env(safe-area-inset-left);
  padding-right: constant(safe-area-inset-right);
  padding-right: env(safe-area-inset-right);

  ::-webkit-scrollbar {
    display: none;
  }
}

/* 针对苹果设备上的Edge浏览器的特殊处理 */
.apple-edge-browser {
  /* 增加底部安全区域的内边距 */
  --safe-area-inset-bottom: 40px;
  
  // .van-action-sheet {
  //   // padding-bottom: var(--safe-area-inset-bottom) !important;
  // }
  
  // .van-popup--bottom {
  //   // padding-bottom: var(--safe-area-inset-bottom) !important;
  // }
  
  /* 确保底部按钮不被遮挡 */
  .van-button--bottom-fixed {
    bottom: var(--safe-area-inset-bottom) !important;
  }
}
</style>

<style lang="scss" scoped>
.layout {
  width: 100vw;
  height: 100%;
  /* 使用自定义属性作为替代方案 */
  // height: calc(var(--vh, 1vh) * 100);
  display: flex;
  flex-direction: column;
  /* 确保内容在Safari工具栏出现/消失时不会移动 */
  position: relative;
  z-index: 10;

  .top-user {
    height: 110px;
    background: #000;
    /* 确保头部固定在顶部 */
    position: sticky;
    top: 0;
    z-index: 10;
    width: 100%;
  }

  .route-wrapper {
    flex: 1;
    // position: relative;
    /* 确保底部有足够空间 */
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
}
</style>
